<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="yes" name="apple-touch-fullscreen" />
        <meta content="telephone=no,email=no" name="format-detection" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>签纸贺兑换</title>

        <link rel="stylesheet" href="css/reset.css" media="screen" title="no title">
        <link rel="stylesheet" href="css/invoices.css" media="screen" title="no title">
        <script src="js/flexible.js" ></script>
        <script src="js/jquery-2.1.3.min.js" ></script>
        <script src="js/cleave.min.js"></script>
        <script src="js/util.js"></script>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script src="js/vue.min.js"></script>
    </head>
    <body >
        
        <div  class="card-number-page"  id="card_number_page">
            <!-- 头部栏 -->
            <div class="title-bar" >
                <div class="left-img" id="back">
                    <img src="img/jt_l.png" alt="">
                </div>
                <div class="title" >
                   签纸贺兑换
                </div>
            </div>

            <div class="main-content ">
                <div class="qzh-logo">
                    <img src="img/qzh_logo.png" alt="">
                </div>
                <div class="card-item clear">
                    <div class="input fl">
                        <input type="tel" placeholder="输入签纸贺兑换劵上的卡号" value="" id="card_number" v-model="cardNumber"
                        @input="userNameChange">
                    </div>
                    <div class="scan fl">
                        <img src="img/scan.png" alt="">
                    </div>
                </div>
                <div class="password-item">
                    <!-- <input type="password" placeholder="输入兑换券密码" value="" id="password"  oninput="if(value.length>6)value=value.slice(0,6)"> -->
                    <input type="tel" style="-webkit-text-security:disc" placeholder="输入兑换券密码" value="" id="password"  oninput="if(value.length>6)value=value.slice(0,6);value=value.replace(/[^0-9]/g,'')"/>
                </div>  

                <div class="hint">
                    卡号、密码是查询历史兑换记录的唯一凭证，请您妥善保管
                </div>

                <div class="btn">
                    <input type="button" value="兑换" disabled="disabled" id="exchange_btn">
                </div>
    
                <div class="instructions">
                    <div>
                        签纸贺兑换券使用说明
                    </div>
                    <div class="img">
                        <img src="img/triangle.png" alt="">
                    </div>
                    
                </div>

               
            </div>
            <div class="logo">
                <img src="img/logo.png" alt="">
            </div>


            <div class="loading">
                <div class="img">
                    <img src="img/loading.gif" alt=""/>
                </div>
            </div>

        </div>

      
    </body>
    <script type="text/javascript">
        var Vue=new Vue({
            el:"#card_number_page",
            data:{
               cardNumber:"",
               oldCardNumber:""
              
            },
            created(){
        
            },
            mounted(){
               

            },
            methods:{
                userNameChange(){
                    if(this.cardNumber.length > 19){
                        this.cardNumber = this.oldCardNumber;
                        return
                    }
                    this.cardNumber = this.cardNumber.replace(/[^\d\s]/ig, "");
                    this.oldCardNumber = this.cardNumber;  
                }
            }
        })

        $(function(){
            window.onload=function(){
                btnValid();
            }

            // //需要把当前页面的url地址传到后台，生成签名信息时需要使用到
		    // var tokenUrl= location.href;
		    // //获取签名的后台接口
		    // var _getWechatSignUrl = '';

            // function wxConfig(_appId,_timestamp, _nonceStr, _signature) {
            //     console.log('获取数据：' + _timestamp +'\n' + _nonceStr +'\n' + _signature);
            //     wx.config({
            //         debug:true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //         appId: _appId,// 必填，公众号的唯一标识
            //         timestamp: _timestamp,// 必填，生成签名的时间戳
            //         nonceStr: _nonceStr,// 必填，生成签名的随机串
            //         signature: _signature,// 必填，签名，见附录1
            //         jsApiList: ['checkJsApi','scanQRCode']
            //         // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            //     });
            // }

            //     //点击扫一扫
            // $(".scan").on("click",function(){
            //     wx.scanQRCode({
            //         desc: 'scanQRCode desc',
            //         needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            //         scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
            //         success : function(res) {
            //             console.log("调用扫描成功",res);
            //             var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            //             $("#codeValue").val(result);//显示结果
            //             alert("扫码结果为：" + result);
            //         },
            //         error:function(res){
            //             console.log(res)
            //         }
            //     });
	  

            // })



            //返回
            $("#back").on("click", function () {
                window.history.go(-1);
            });
            //格式化卡号
            var cleave = new Cleave('#card_number', {
                blocks: [4, 4, 4, 4],
                uppercase: true
            });
            //卡号输入
            var oldVal = "";
            $("#card_number").on("input",function(){
                
                // // $(this).val($(this).val().replace(/[^\d\s]/ig, ""));
                // var value = $(this).val().replace(/[^\d\s]/ig, "")
                // // alert(value)
                // $(this).val(value);

                btnValid();
            })
            //密码输入
            $("#password").on("input",function(){
                btnValid();
            })
            //判断按钮是否可用
            function btnValid(){
                var card = $("#card_number").val();
                var password = $("#password").val();
                
                    if(card.length >= 19 && password.length >= 6){
                        $("#exchange_btn").attr("disabled",false);
                    }else{
                        $("#exchange_btn").attr("disabled",true);
                    }
               
               
            }
            //点击兑换按钮
            $("#exchange_btn").on("click",function(){
                var card_number=$("#card_number").val();
                var password = $("#password").val();
                console.log(trims(card_number),password)
                if(card_number.length != 19){
                    $.toast("请输入正确卡号");
                    return;
                }

                if(password.length != 6){
                    $.toast("请输入正确密码");
                    return;
                }
                window.location="instructions.html"

            })
            //点击兑换使用说明
            $(".instructions").on("click",function(){
                    window.location="instructions.html"
            })
            //去除空格方法获取的时候有空格用这个方法去空格
            function trims(str) {
                    var result;
                    result = str.replace(/(^\s+)|(\s+$)/g, "");
                    result = result.replace(/\s/g, "");
                    return result;
                }
            
        })
    </script>
</html>

